<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div class="card" style="width: 100%;">
			<el-tag type="primary" style="width: 100%;font-size: 15px;background-color: #000;color: white"><i class="fa fa-info-circle" style="padding-right: 5px;"></i>自检记录详情</el-tag>
			<div class="card-body">
				<img style="cursor: pointer;height: 210px" title="点击查看高清大图" v-bind:src="imgUrl" @click="findImg"/>
				<div class="detail">
					<dl>
						<dt style="margin-top: 0;">设备名：</dt>
						<dd style="margin-top: 0;">{{templateObj.devicename}}</dd>
					</dl>
					<dl>
						<dt>设备码：</dt>
						<dd>{{templateObj.sn}}</dd>
					</dl>
					<dl>
						<dt>检测设备类型：</dt>
						<dd v-if="templateObj.detecttype == 'Projector'">投影仪</dd>
						<dd v-if="templateObj.detecttype == 'Curtain'">幕布</dd>
						<dd v-if="templateObj.detecttype == 'Sound'">音响</dd>
					</dl>
					<dl>
						<dt>检测时间：</dt>
						<dd>{{templateObj.time}}</dd>
					</dl>
					<dl  v-if="templateObj.detecttype == 'Projector'">
						<dt>标准值：</dt>
						<dd>亮度：{{templateObj.standarddata.luminosity}}</dd>&nbsp;
						<dd>流明：{{templateObj.standarddata.lumen}}</dd>
					</dl>
					<dl  v-if="templateObj.detecttype == 'Curtain'">
						<dt>标准值：</dt>
						<dd>X值：{{templateObj.standarddata.x}}</dd>&nbsp;
						<dd>Y值：{{templateObj.standarddata.y}}</dd>
					</dl>
					<dl  v-if="templateObj.detecttype == 'Projector'">
						<dt>实际值：</dt>
						<dd>{{templateObj.realdata.luminosity}}</dd>
					</dl>
					<dl  v-if="templateObj.detecttype == 'Curtain'">
						<dt>实际值：</dt>
						<dd>X值：{{templateObj.realdata.x}}</dd>&nbsp;
						<dd>Y值：{{templateObj.realdata.y}}</dd>
					</dl>
					<dl  v-if="templateObj.detecttype == 'Sound'">
						<dt>实际音量值：</dt>
						<dd>{{templateObj.realdata.volume}}</dd>
					</dl>
					<dl>
						<dt>检测结果：</dt>
						<dd>
							<el-tag v-if="templateObj.result == 0" type="success">正常</el-tag>
							<el-tag v-if="templateObj.result == 1" type="danger">异常</el-tag>
							<el-tag v-if="templateObj.result == 2" type="warning">标定文件不存在</el-tag>
							<el-tag v-if="templateObj.result == 3" type="warning">摄像头出错</el-tag>
							<el-tag v-if="templateObj.result == 4" type="warning">投影机未添加</el-tag>
							<el-tag v-if="templateObj.result == 5" type="warning">音量传感器未添加</el-tag>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="card" style="width: 100%;padding-top: 10px">
			<el-tag type="primary" style="width: 100%;font-size: 15px;background-color: #000;color: white"><i class="fa fa-history" style="padding-right: 5px;"></i>设备自检历史记录</el-tag>
			<div class="detail-body">
				<headerOpreate style="padding: 3px 0px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
				<el-table border style="width: 100%" @selection-change="handleSelectionChange" :data="tableData">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<!-- <el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="devicename"></el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column> -->
					<el-table-column :show-overflow-tooltip="true" label="检测时间" align="center" prop="time"></el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="检测设备类型" align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.detecttype == 'Projector'">投影仪</span>
							<span v-if="scope.row.detecttype == 'Curtain'">幕布</span>
							<span v-if="scope.row.detecttype == 'Sound'">音响</span>
						</template>
					</el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="标准值" align="center">
						<template slot-scope="scope">
							<div v-if="scope.row.detecttype == 'Projector'">
								<span>亮度：{{scope.row.standarddata.luminosity}}</span>&nbsp;
								<span>流明：{{scope.row.standarddata.lumen}}</span>
							</div>
							<div v-if="scope.row.detecttype == 'Curtain'">
								<span>X值：{{scope.row.standarddata.x}}</span>&nbsp;
								<span>Y值：{{scope.row.standarddata.y}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="实际值" align="center">
						<template slot-scope="scope">
							<div v-if="scope.row.detecttype == 'Projector'">
								<span>亮度：{{scope.row.realdata.luminosity}}</span>
							</div>
							<div v-if="scope.row.detecttype == 'Curtain'">
								<span>X值：{{scope.row.realdata.x}}</span>&nbsp;
								<span>Y值：{{scope.row.realdata.y}}</span>
							</div>
							<div v-if="scope.row.detecttype == 'Sound'">
								<span>音量：{{scope.row.realdata.volume}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="检测结果" align="center">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.result == 0" type="success">正常</el-tag>
							<el-tag v-if="scope.row.result == 1" type="danger">异常</el-tag>
							<el-tag v-if="scope.row.result == 2" type="warning">标定文件不存在</el-tag>
							<el-tag v-if="scope.row.result == 3" type="warning">摄像头出错</el-tag>
							<el-tag v-if="scope.row.result == 4" type="warning">投影机未添加</el-tag>
							<el-tag v-if="scope.row.result == 5" type="warning">音量传感器未添加</el-tag>
						</template>
					</el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="" align="center">
						<template slot-scope="scope">
							<i class="el-icon-picture" style="cursor: pointer;font-size:20px;color :#20A0FF"
							@click="showImg(scope.row)"></i>
						</template>
					</el-table-column>
				</el-table>
				<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
					<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
					</el-pagination>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="dialogImg" id="img-diglog" :show-close="false">
			<img style="width: 100%;height: 100%" v-bind:src="dialogImgUrl" />
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery';
	import { GloabFun,HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import noImg from '../../../../assets/images/no_img.jpg'
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				loading: false,
				isReload: false,
				imgUrl: '',
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				dialogImg: false,
				opreateDatas: [{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
				{
					size: "small",
					type: "danger",
					icon: "el-icon-delete2 el-icon--left",
					name: "删除",
					action: "multipleDelete"
				}
				]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			findImg() {
				this.dialogImgUrl = this.imgUrl;
				this.dialogImg = true;
			},
			showImg(row) {
				this.dialogImgUrl = row.savefile;
				this.dialogImg = true;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				array.forEach(function(item) {
					result.push(item.keyid);
				})
				return result;
			},
			multipleDelete() {
				if(this.formateSelection().length > 0) {
					this.$confirm(this.$t('message.bulkDeleteWarning'), this.$t('message.warning'), {
						confirmButtonText: this.$t('message.yes'),
						cancelButtonText: this.$t('message.no'),
						type: 'warning'
					}).then(() => {
						//批量删除成功处理
						var param = {
							keyids: this.formateSelection(),
							UserId: parseInt(GloabFun.getKeyId())
						}
						this.loading = true;
						HttpServer.httpPost.call(this, '/Api/NCC/Delete/DetectResult', param, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							this.getDatas();
						});
					}).catch(() => {
						//取消批量删除处理
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				var param = {
					sn: this.templateObj.sn,
					index: this.currentPage,
					pagesize: this.pageSize,
					filter: "",
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this,'/Api/NCC/AutoDetectResultInfo',param, function(response){}, function(response){
					this.loading = false;
					if(response.data.code === 0){
						response.data.info.forEach(function(item){
							if(item.savefile == ''){
								item.savefile = noImg;
							}
						})
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					}else{
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				})
			},
		},
		created() {
			if(this.templateObj.savefile != ''){
				this.imgUrl = this.templateObj.savefile;
			}
			this.getDatas();
		}
	}
</script>
<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style lang="less" scope>
	.card {
		.card-body {
			padding-top: 8px;
			display: flex;
			img {
				height: 210px;
			}
			.detail {
				margin-left: 20px;
				dl {
					font-size: 14px;
					clear: left;
					dt,
					dd {
						display: inline-block;
						margin-top: 12px;
					}
				}
			}
		}
		.detail-title {
			height: 31px;
			color: green;
		}
		.detail-body {
			font-size: 14px;
			section {
				margin-top: 20px;
			}
		}
	}
	#img-diglog {
		/*.el-dialog--small {
			width: auto !important;
		}
		.el-dialog__body {
			overflow: visible !important;
		}*/
		text-align: center;
		.el-dialog {
			background: none;
			box-shadow: none;
		}
		.el-dialog__body {
			overflow: visible !important;
		}
	}
</style>